/**
 * ECharts通用组件测试配置
 * 提供各种类型的图表配置示例，用于测试通用组件的兼容性
 * 包含JavaScript函数支持测试
 */

// 基础柱状图
export const barChartOption = {
  title: {
    text: '基础柱状图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        color: '#3b82f6'
      }
    }
  ]
};

// 折线图
export const lineChartOption = {
  title: {
    text: '基础折线图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#ef4444'
      },
      lineStyle: {
        width: 3
      }
    }
  ]
};

// 饼图
export const pieChartOption = {
  title: {
    text: '基础饼图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 散点图
export const scatterChartOption = {
  title: {
    text: '基础散点图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      formatter: '{value} cm'
    }
  },
  yAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      formatter: '{value} kg'
    }
  },
  series: [
    {
      name: '身高体重分布',
      type: 'scatter',
      data: [
        [161.2, 51.6],
        [167.5, 59.0],
        [159.5, 49.2],
        [157.0, 63.0],
        [155.8, 53.6],
        [170.0, 59.0],
        [159.1, 47.6],
        [166.0, 69.8],
        [176.2, 66.8],
        [160.2, 75.2],
        [172.7, 62.0],
        [155.0, 49.2],
        [156.5, 67.2],
        [164.0, 53.8],
        [160.9, 54.4]
      ],
      symbolSize: 8,
      itemStyle: {
        color: '#10b981'
      }
    }
  ]
};

// 雷达图
export const radarChartOption = {
  title: {
    text: '基础雷达图',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data: ['预算分配', '实际开销'],
    bottom: 0
  },
  radar: {
    name: {
      textStyle: {
        color: '#fff',
        backgroundColor: '#999',
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 38000 },
      { name: '研发', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  },
  series: [
    {
      name: '预算 vs 开销',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '预算分配'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '实际开销'
        }
      ]
    }
  ]
};

// 仪表盘
export const gaugeChartOption = {
  title: {
    text: '基础仪表盘',
    left: 'center'
  },
  series: [
    {
      name: '业务指标',
      type: 'gauge',
      detail: { formatter: '{value}%' },
      data: [{ value: 50, name: 'SCORE' }],
      axisLine: {
        lineStyle: {
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ],
          width: 3
        }
      }
    }
  ]
};

// 混合图表（柱状图+折线图）
export const mixedChartOption = {
  title: {
    text: '混合图表示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['蒸发量', '降水量', '温度'],
    bottom: 0
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '水量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '温度',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: '蒸发量',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: '降水量',
      type: 'bar',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: '温度',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

// 3D柱状图（需要GL扩展）
export const bar3DOption = {
  title: {
    text: '3D柱状图',
    left: 'center'
  },
  tooltip: {},
  visualMap: {
    max: 20,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffcc',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  xAxis3D: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  },
  yAxis3D: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // autoRotate: true
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true
      },
      ambient: {
        intensity: 0.3
      }
    }
  },
  series: [
    {
      type: 'bar3D',
      data: Array.from({ length: 100 }, (_, i) => [i % 10, Math.floor(i / 10), Math.random() * 20]),
      shading: 'lambert',
      label: {
        textStyle: {
          fontSize: 16,
          borderWidth: 1
        }
      },
      emphasis: {
        label: {
          textStyle: {
            fontSize: 20,
            color: '#900'
          }
        },
        itemStyle: {
          color: '#900'
        }
      }
    }
  ]
};

// 热力图
export const heatmapOption = {
  title: {
    text: '热力图示例',
    left: 'center'
  },
  tooltip: {
    position: 'top'
  },
  animation: false,
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: [
      '12a',
      '1a',
      '2a',
      '3a',
      '4a',
      '5a',
      '6a',
      '7a',
      '8a',
      '9a',
      '10a',
      '11a',
      '12p',
      '1p',
      '2p',
      '3p',
      '4p',
      '5p',
      '6p',
      '7p',
      '8p',
      '9p',
      '10p',
      '11p'
    ],
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: Array.from({ length: 168 }, (_, i) => [
        i % 24,
        Math.floor(i / 24),
        Math.floor(Math.random() * 10)
      ]),
      label: {
        show: true
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 桑基图
export const sankeyOption = {
  title: {
    text: '桑基图示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'sankey',
      data: [
        { name: 'a' },
        { name: 'b' },
        { name: 'a1' },
        { name: 'a2' },
        { name: 'b1' },
        { name: 'c' }
      ],
      links: [
        { source: 'a', target: 'a1', value: 5 },
        { source: 'a', target: 'a2', value: 3 },
        { source: 'b', target: 'b1', value: 8 },
        { source: 'a', target: 'b1', value: 3 },
        { source: 'b1', target: 'a1', value: 1 },
        { source: 'b1', target: 'c', value: 2 }
      ],
      itemStyle: {
        borderWidth: 1,
        borderColor: '#aaa'
      },
      lineStyle: {
        color: 'source',
        curveness: 0.5
      }
    }
  ]
};

// 包含JavaScript函数的测试配置
export const jsObjectTestOptions = {
  // 水球图（支持尾随逗号和JavaScript函数）
  liquidFill: {
    title: {
      text: '基本水球图'
    },
    series: [
      {
        type: 'liquidFill',
        data: [0.6],
        color: ['#3b82f6'],
        itemStyle: {
          opacity: 0.6
        },
        outline: {
          borderDistance: 8,
          itemStyle: {
            borderWidth: 8,
            borderColor: '#156acf',
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.25)'
          }
        }
      }
    ]
  },

  // 带函数formatter的柱状图
  barWithFormatter: {
    title: {
      text: '带自定义formatter的柱状图',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return (
          params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + ' (自定义格式)'
        );
      }
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [120, 200, 150, 80, 70],
        itemStyle: {
          color: function (params) {
            const colorList = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];
            return colorList[params.dataIndex % colorList.length];
          }
        }
      }
    ]
  },

  // 动态饼图配置
  pieWithFunction: {
    title: {
      text: '动态饼图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 274, name: '联盟广告' },
          { value: 235, name: '视频广告' },
          { value: 400, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          formatter: function (params) {
            return params.name + '\n' + params.percent + '%';
          }
        }
      }
    ]
  }
};

// 导出所有配置
export const testOptions = {
  barChart: barChartOption,
  lineChart: lineChartOption,
  pieChart: pieChartOption,
  scatterChart: scatterChartOption,
  radarChart: radarChartOption,
  gaugeChart: gaugeChartOption,
  mixedChart: mixedChartOption,
  bar3D: bar3DOption,
  heatmap: heatmapOption,
  sankey: sankeyOption,
  // 添加JavaScript函数测试配置
  ...jsObjectTestOptions
};

export default testOptions;
